<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>租车网首页</title>
    <link rel="stylesheet" th:href="@{/res/layui/css/layui.css}">
    <!--引入awesome图标库的样式表-->
    <link rel="stylesheet" th:href="@{/res/font-awesome-4.7.0/css/font-awesome.css}">
    <link rel="stylesheet" th:href="@{/res/css/global.css}">
</head>

<body>

<style>


</style>
<!---定义最外面的容器,container-->
<div class="layui-col-md12" style="padding: 0px; background-color: #F2F2F2;">

    <!--以下包含导航栏页面-->
    <ul th:replace="./commons/nav :: common_nav">

    </ul>

</div>


<div class="layui-container fly-marginTop fly-user-main">
    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
        <li class="layui-nav-item layui-this">
            <a th:href="@{/admin/findPagerCars}">
                <i class="fa fa-car fa-lg" aria-hidden="true"></i>
                车辆维护
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="#">
                <i class="fa fa-cogs fa-lg" aria-hidden="true"></i>
                基本设置
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="#">
                <i class="fa fa-th-list fa-lg" aria-hidden="true"></i>
                其它模块
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="#">
                <i class="fa fa-th-list fa-lg" aria-hidden="true"></i>
                其它模块
            </a>
        </li>
    </ul>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user" id="LAY_msg" style="margin-top: 15px;">
            <!--以下是面包屑-->
            <div class="layui-card-header">
          <span class="layui-breadcrumb">
            <a><cite>后台管理</cite></a>
            <a id="currentType" href="#">车辆维护</a>
            <a id="currentBrand" href="#"></a>
          </span>
            </div>

            <div id="LAY_minemsg" style="margin-top: 10px;">
                <table class="layui-table" lay-size="sm">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col width="150">
                        <col width="150">
                        <col width="150">
                        <col width="240">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>车辆编号</th>
                        <th>品牌</th>
                        <th>类型</th>
                        <th>车型</th>
                        <th>租金</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    <!--每个tr就是一辆车，所有要循环tr-->
                    <!--循环的开始-->
                    <tr th:each="c:${carsList}">
                        <td th:text="${c.id}">A01001</td>
                        <td th:text="${c.brand}">一汽大众</td>
                        <td th:text="${c.type}">轿车</td>
                        <td th:text="${c.name}">捷达</td>
                        <td th:text="${c.price}">120</td>
                        <td>
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn-primary layui-btn-sm addCars"><i
                                        class="layui-icon">&#xe654;</i></button>
                                <button class="layui-btn layui-btn-normal layui-btn-sm updateCars"><i
                                        class="layui-icon">&#xe642;</i></button>
                                <button th:title="${c.id}" class="layui-btn layui-btn-danger layui-btn-sm deleteCars"><i
                                        class="layui-icon">&#xe640;</i></button>
                            </div>
                        </td>
                    </tr>
                    <!--循环的结束-->


                    </tbody>
                </table>

                <!--分页组件-->
                <div id="mypager"></div>

            </div>
        </div>
    </div>

</div>

<!--网站页面尾部开始-->
<div id="footer" class="layui-col-md12" style=" background-color: #666; height:120px;">
    <div class="copyright" style=" background-color: #666; height:120px;">
        <div class="layui-col-md4" style="text-align: right">
            <b style="color: rgb(34, 34, 34); font-size: 32px; display: block;">
                <font color="#ff6537" style="color: rgb(255, 101, 55);">预订说明</font>
            </b>
            <b style="color: rgb(34, 34, 34); font-size: 32px; display: block;"><span
                    style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">让车拥有和使用更便捷、更实惠</span><span
                    style="">
            <font face="Arial">
              <font color="#dcdcdc" style="color: rgb(220, 220, 220);"><br></font>
            </font>
          </span>
            </b>
            <b style="color: rgb(34, 34, 34); font-size: 32px;  display: block;">
                <span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">服务优势</span><span
                    style="">

          </span>
            </b>
        </div>

        <div class="layui-col-md4">
            <div>
                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: center; display: block;">
                    <font color="#ff6537" style="color: rgb(255, 101, 55);">联系我们</font>

                </b>
                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: center; display: block;"><span
                        style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">让车拥有和使用更便捷、更实惠</span><span
                        style="">
              <font face="Arial">
                <font color="#dcdcdc" style="color: rgb(220, 220, 220);"><br></font>
              </font>
            </span>
                </b>

                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: center; display: block;">
                    <span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">服务优势</span><span
                        style="">

            </span>
                </b>
            </div>

        </div>

        <div class="layui-col-md4">
            <div>
                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: left; display: block;">
                    <font color="#ff6537" style="color: rgb(255, 101, 55);">帮助中心</font>

                </b>
                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: left; display: block;"><span
                        style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">让车拥有和使用更便捷、更实惠</span><span
                        style="">
              <font face="Arial">
                <font color="#dcdcdc" style="color: rgb(220, 220, 220);"><br></font>
              </font>
            </span>
                </b>

                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: left; display: block;">
                    <span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">服务优势</span><span
                        style="">

            </span>
                </b>
            </div>

        </div>
    </div>

    <div class="copyright" style="padding: 20px;color:#FFF; background-color: #666; height:20px; text-align: center">
        ©2018 网站样板-汽车买卖租赁版权所有 &nbsp;&nbsp; [<a th:href="@{/admin/toMain}" style="color:#FFF">后台管理</a>]

    </div>
</div>
<!--网站页面尾部结束-->


<script th:src="@{/res/layui/layui.js}"></script>
<script th:inline="javascript">
    //一般直接写在一个js文件中
    layui.use(['layer', 'element', 'carousel', 'form', 'rate', 'laypage'], function () {
        var layer = layui.layer,
            form = layui.form;
        var element = layui.element;
        var carousel = layui.carousel;
        var rate = layui.rate;
        var laypage = layui.laypage;

        var $ = layui.$;
        //layer.msg('Hello World');

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });

        //常规轮播
        carousel.render({
            elem: '#test10',
            arrow: 'always',
            interval: 3000,
            anim: 'fade',
            width: '100%',
            height: '600px',
            top: '-400px'
        });


        //半星效果
        rate.render({
            elem: '#test1',
            value: 2.5 //初始值
            ,
            half: true //开启半星
            ,
            readonly: true
        });

        rate.render({
            elem: '#test2',
            value: 3.5 //初始值
            ,
            half: true //开启半星
            ,
            readonly: true
        });

        rate.render({
            elem: '#test3',
            value: 4.5 //初始值
            ,
            half: true //开启半星
            ,
            readonly: true
        });

        rate.render({
            elem: '#test4',
            value: 5 //初始值
            ,
            half: true //开启半星
            ,
            readonly: true
        });

        rate.render({
            elem: '#test5',
            value: 5 //初始值
            ,
            half: true //开启半星
            ,
            readonly: true
        });

        rate.render({
            elem: '#test6',
            value: 5 //初始值
            ,
            half: true //开启半星
            ,
            readonly: true
        });


        /*<![CDATA[*/
        var pagerUrl = /*[[@{/admin/findPagerCars}]]*/;//获取动作地址
        var totalNumber = [[${pager.getTotalElements()}]]; //记录总数
        var pageSize = [[${pager.getSize()}]]; //每页记录数
        var currentPageNumber = [[${pager.getNumber()+1}]]; //当前页号
        /*]]>*/


        laypage.render({
            elem: 'mypager',
            count: totalNumber, //数据总数,
            curr: currentPageNumber,
            limit:pageSize,
            jump: function (obj,first) {
                //首次不执行
                if (!first) {
                    window.location.href = pagerUrl + "?currentPageNumber="+ (obj.curr-1);
                }
            }

        });

        //响应用户点击添加按钮，弹出一个添加页面

        /*<![CDATA[*/
        var toAddCarsUrl = /*[[@{/admin/toAddCars}]]*/;//获取动作地址
        var toUpdateCarsUrl = /*[[@{/admin/toUpdateCars}]]*/;//获取动作地址

        /*]]>*/

        $('.addCars').click(function(){

            layer.open({
                 title: '添加汽车信息',
                 type:2,
                 area: ['860px', '580px'],
                 content: toAddCarsUrl

            });

        })


        $('.updateCars').click(function(){

            layer.open({
                title: '修改汽车信息',
                type:2,
                area: ['860px', '580px'],
                content: toUpdateCarsUrl+"?id="+id
                /* /toUpdateCarUrl/+"id" */
            });

        });

        /*<![CDATA[*/
        var deleteUrl = /*[[@{/admin/deleteCars}]]*/;//获取动作地址

        /*]]>*/

        $('.deleteCars').click(function(){

            var id = $(this).attr('title'); //获得要删除的汽车的编号

            //提示用户是否要真的删除。
            layer.confirm('确认要删除吗?', {icon: 3, title:'提示'}, function(index){
                //do something

                $.ajax({
                    url: deleteUrl,
                    data:{id:id},
                    async:true,
                    dataType:'json',
                    success:function(resp){
                        if(resp.meta.success){
                            layer.alert('删除成功！',function(){
                                window.parent.location.reload();
                                parent.layer.close(index);
                            });
                        }
                    }
                })

                //layer.close(index);
            });




        });

    });
</script>

</body>

</html>